<template>
  <div class="popup-content">
    <div class="popup-header">
      <h3 :title="info.ChannelName || info.Name || '未命名监控点'">{{ info.ChannelName || info.Name || '未命名监控点' }}</h3>
      <span class="close-btn" @click="handleClose">&times;</span>
    </div>
    <div class="popup-body">
      <p><strong>序列号：</strong><span>{{ info.DeviceSerial }}</span></p>
      <p><strong>安装地址：</strong><span class="address-text" :title="addressText">{{ addressText }}</span></p>
      <p><strong>所属部门：</strong><span>{{ info.OwnerDeptId || '未知' }}</span></p>
      <p><strong>通道号：</strong><span>{{ info.ChannelNo }}</span></p>
      <p>
        <strong>状态：</strong>
        <div :class="['status-' + info.status]">
          {{ statusText }}
        </div>
      </p>
    </div>
    <div class="popup-footer">
      <button class="tool-btn preview-btn" @click="handlePreview">
        <i class="tool-icon preview-icon"></i>视频预览
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

// 定义监控点信息接口
interface MonitorInfo {
  ChannelName?: string
  Name?: string
  OwnerId?: string
  DeviceSerial?: string
  ChannelNo?: number
  status: 'online' | 'offline' | 'error'
  addressObj?: any
  [key: string]: any
}

// 定义组件属性
const props = defineProps<{
  info: MonitorInfo
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'close'): void
  (e: 'preview'): void
  (e: 'playback'): void
}>()

// 计算属性：地址文本
const addressText = computed(() => {
  return props.info.addressObj && props.info.addressObj.Address 
    ? props.info.addressObj.Address 
    : '未知地址'
})

// 计算属性：状态文本
const statusText = computed(() => {
  return props.info.status === 'online' ? '在线' : 
         props.info.status === 'offline' ? '离线' : '异常'
})

// 事件处理函数
const handleClose = () => {
  emit('close')
}

const handlePreview = () => {
  // 检查设备状态，如果不在线则提示用户
  if (props.info.status !== 'online') {
    alert('该监控点当前不在线，无法播放视频')
    return
  }
  // 触发父组件预览事件
  emit('preview')
}

// 处理视频错误
const handleVideoError = (error: any) => {
  console.error('视频播放错误:', error)
}
</script>

<style scoped>
.popup-content {
  padding: 0;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  background: #f5f7fa;
  border-radius: 4px 4px 0 0;
}

.popup-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
  max-width: 330px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-btn {
  cursor: pointer;
  font-size: 20px;
  color: #999;
  transition: all 0.3s;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
}

.close-btn:hover {
  color: #666;
  background: rgba(0,0,0,0.05);
}

.popup-body {
  padding: 6px 16px;
  background: white;
}

.popup-body p {
  margin: 12px 0;
  font-size: 14px;
  color: #666;
  display: flex;
}

.popup-body strong {
  color: #333;
  margin-right: 8px;
  width: 80px;
  flex-shrink: 0;
}

.popup-body span {
  flex: 1;
  word-break: break-all;
}

.address-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 2.8em;
}

.status-online {
  color: #67C23A;
  background: rgba(103, 194, 58, 0.1);
  padding: 2px 8px;
}

.status-offline {
  color: #909399;
  background: rgba(144, 147, 153, 0.1);
  padding: 2px 8px;
}

.status-error {
  color: #F56C6C;
  background: rgba(245, 108, 108, 0.1);
  padding: 2px 8px;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  padding: 0;
  border-top: 1px solid #eee;
  border-radius: 0 0 4px 4px;
  height: 40px;
}

.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #606266;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  background: rgba(0, 0, 0, 0.03);
}

.tool-btn:first-child {
  border-right: 1px solid #eee;
}

.tool-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #409EFF;
}

.tool-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.preview-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23606266"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-2 12V8l6 4-6 4z"/></svg>');
}

.playback-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23606266"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M9.5 8v2.5H12v-1H10V8z"/></svg>');
}

.tool-btn:hover .preview-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23409EFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-2 12V8l6 4-6 4z"/></svg>');
}

.tool-btn:hover .playback-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23409EFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M9.5 8v2.5H12v-1H10V8z"/></svg>');
}
</style> 